<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <div class="box">
            <table border="1" width='300' align="center">
                <thead>
                    <th>ID</th>
                    <th>UserName</th>
                </thead>
                <!-- v-if v-else-if v-else 在结构上必须仅挨在一起 -->
                <tbody align="center" v-if="listStatus == 'loading'">
                    <tr>
                        <td colspan="2">loading...</td>
                    </tr>
                </tbody>
                <tbody align="center" v-else-if="listStatus=='noData'">
                    <tr>
                        <td colspan="2">noData...</td>
                    </tr>
                </tbody>
                <tbody align="center" v-else>
                    <tr v-for="item of list" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="box1">
            <div class="user">
                <template v-if="isLogin">
                    <span>{{userName}}</span>
                    <div>
                        <a href="javascript:;" @click='showMyList'>个人中心</a>
                        <ul v-show="myListShow">
                            <li><a href="#">我的资料</a></li>
                            <li><a href="#">我的账号</a></li>
                            <li><a href="#">我的钱包</a></li>
                        </ul>
                    </div>
                </template>
                <template v-else>
                    未登录
                </template>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        /**
         * 指令表达式放回truthy会渲染
         * */
        var vm = new Vue({
            /**
             * v-if是对DOM的移除和添加，在移除的时候通过注释节点占位
             *      对内部的子组件与事件监听都会销毁与重建
             * 
             * v-if只有条件是truthy的时候才会被渲染（惰性渲染）
             * v-show总是会被渲染，用display来控制其显示与隐藏
             * 
             * v-if在切换的时候会提高开销，如果条件为假值，初始化渲染就不会进行的
             * v-show在切换的时候开销低，但是初始化渲染时无论显示与否都要被渲染
             * 
             * 如果切换频繁就用v-show
             * 如果切换不频繁，（加载时不需要试图）就是使用v-if
             **/
            el: '#app',
            data() {
                return {
                    list: [],
                    listStatus: 'loading',
                    userName: 'lisi',
                    isLogin: true,
                    myListShow: false
                }
            },
            computed: {

            },
            mounted() {
                const random = Math.random();
                setTimeout(() => {
                    if (random <= 0.5) {
                        this.list = [{
                            id: 1,
                            name: 'Mike'
                        }, {
                            id: 2,
                            name: 'Tom'
                        }];
                        this.listStatus = 'show';
                    } else {
                        this.listStatus = 'noData'
                    }
                }, 500);
            },
            methods: {
                showMyList() {
                    this.myListShow = !this.myListShow;
                }
            }
        })
    </script>
</body>

</html>